<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--jquery，不可修改版本-->
<script src="http://cdn.javaex.cn/javaex/pc/lib/jquery-1.7.2.min.js"></script>
<title>Insert title here</title>

	<style>
		body{
			background: #353f42;
		}

		*{
			padding: 0;
			margin: 1px;
		}

		.main {
			margin: 0 auto;
			padding-left: 25px;
			padding-right: 25px;
			padding-top: 15px;
			width: 400px;
			height: 550px;
			background: #FFFFFF;
			/*以下css用于让登录表单垂直居中在界面,可删除*/
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -175px;
			margin-left: -175px;
		}

		.title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding-left: 150px;
		}

		.title span {
			font-size: 18px;
			color: #353f42;
		}

		.title-msg {
			width: 100%;
			height: 64px;
			line-height: 64px;
		}

		.title:hover{
			cursor: default	;
		}

		.title-msg:hover{
			cursor: default	;
		}

		.title-msg span {
			font-size: 12px;
			color: #707472;
		}

		.input-content {
			width: 100%;
			height: 35px;
		}

		.input-content input {
			width: 330px;
			height: 40px;
			border: 1px solid #dad9d6;
			background: #ffffff;
			padding-left: 20px;
			padding-right: 40px;
		}

		.enter-btn {
			width: 350px;
			height: 40px;
			color: #fff;
			background: #0bc5de;
			line-height: 40px;
			text-align: center;
			border: 0px;
		}

		.foor{
			width: 100%;
			height: auto;
			color: #9b9c98;
			font-size: 12px;
			margin-top: 20px;
		}

		.enter-btn:hover {
			cursor:pointer;
			background: #1db5c9;
		}

		.foor div:hover {
			cursor:pointer;
			color: #484847;
			font-weight: 600;
		}

		.left{
			float: left;
		}
		.right{
			float: right;
		}
	</style>
</head>
<body>
<div class="video-bg">
	<video muted data-autoplay="" loop autoplay src="//game.gtimg.cn/images/lol/act/a20190920worlds/video.mp4"
		   class="video-tvc" id="video-tvc" data-object-fit="">
	</video>
</div>
<div class="main">
	<div class="title">
		<span>账号注册</span>
	</div>

	<form class="login-form" method="post" action="register" enctype="multipart/form-data">
		<!--输入框-->
		<div >
			<!--autoFocus-->
			<div>
				用户名:<input type="text" autocomplete="off" placeholder="用户名" name="cname" class="input-content"/>
			</div>

			<div style="margin-top: 10px">
				密码:<input type="password" autocomplete="off" placeholder="登录密码" name="cpass" class="input-content" maxlength="32"/>
			</div>
			<div style="margin-top: 10px">
				性别:<input type="text" autocomplete="off" placeholder="性别" name="csex" class="input-content" maxlength="32"/>
			</div>
			<div style="margin-top: 10px">
				手机:<input type="phone" autocomplete="off" placeholder="手机账号" name="cphone" class="input-content" maxlength="32"/>
			</div>
			<div style="margin-top: 10px">
				邮箱:<input type="email" autocomplete="off" placeholder="邮箱" name="cemail" class="input-content" maxlength="32"/>
			</div>
			<div style="margin-top: 10px">
				头像:<input type="file" autocomplete="off" name="headImage" class="input-content" maxlength="32"/>
			</div>
			<div style="text-align: center;margin-top: 10px" class="input-content">
				<button type="submit" class="enter-btn" >注册 </button>
			</div>
		</div>
	</form>

</div>
</body>
	<script>
		var video = $('#video-tvc')[0];
		if (~location.hostname.indexOf('iesdouyin')) {
			$('.gognan-box').remove()
		}
		$('.unmute').click(function() {
			if ($(this).hasClass('mute')) {
				video.muted = true;
			}
			else {
				video.muted = false;
			}
			$(this).toggleClass('mute')
		});
	</script>

</html>